<template>
  <div class="rank-card w-96 bg-white rounded-lg shadow-lg p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold">刷题排行榜</h2>
      <div class="relative flex items-center">
        <button
          class="flex items-center space-x-1 text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap ml-3"
        >
          <span>十分钟刷新一次</span>
        </button>
        <button
          class="flex items-center space-x-1 text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap"
          @click="fetchRankCommon('active')"
        >
          <i class="fas fa-sync-alt" style="margin-left: 5px"></i>
        </button>
      </div>
    </div>
    <div class="space-y-4">
      <div
        v-for="(user, index) in rankList"
        :key="user.id || index"
        class="flex items-center p-3 rounded-lg transition-colors hover:bg-gray-50"
      >
        <div class="w-8 text-center">
          <template v-if="index < 3">
            <i
              :class="[
                'fas',
                index === 0
                  ? 'fa-crown text-yellow-400'
                  : index === 1
                  ? 'fa-crown text-gray-400'
                  : 'fa-crown text-yellow-700',
              ]"
            ></i>
          </template>
          <span v-else class="text-gray-400">{{ index + 1 }}</span>
        </div>
        <div class="w-10 h-10 rounded-full overflow-hidden"></div>
        <div class="ml-3 flex-grow">
          <div class="font-medium">{{ user.userName }}</div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="text-sm text-gray-500">{{ user.acCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { RankControllerService } from "../../backendapi";
import { message } from "ant-design-vue";

interface User {
  id?: number;
  userName: string;
  acCount: number;
}

const rankList = ref<User[]>([]);
const fetchRankCommon = async (parm: string) => {
  if (parm == "init") {
    await fetchRankList();
  } else {
    await fetchRankList();
    message.success("刷新排行榜成功");
  }
};
const fetchRankList = async () => {
  try {
    const response = await RankControllerService.getRankUsingGet();
    console.log(response);
    if (response.data) {
      rankList.value = response.data;
    }
  } catch (error) {
    console.error("获取排行榜数据失败:", error);
  }
};

onMounted(() => {
  fetchRankCommon("init");
  // 定时刷新
  setInterval(fetchRankList, 10 * 60 * 1000);
});
</script>

<style scoped>
.rank-card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
</style>
